<template>
    <view
        @touchstart="handleTouchstart"
        @touchend="handleTouchend"
    >学习触屏事件</view>
</template>

<script>
    /*
    * 1、给容器绑定两个触屏事件 touchstart 和 touchend
    * 2、用户按下屏幕事件
    *   2.1、记录用户按下屏幕的时间 Date.now() 时间戳 返回 YYYY-MM-DD到现在的毫秒数
    *   2.2、记录用户按下屏幕的坐标 x 和 y
    * 3、用户离开屏幕事件
    *   3.1、记录用户离开屏幕的时间 Date.now()
    *   3.2、记录用户离开屏幕的坐标 x 和 y
    *   3.3、根据时间运算，判断用户按下屏幕的时长是否合法
    *   3.4、根据两对坐标 判断距离是否合法
    * */
    export default {
        name: "index",
        data() {
            return {
                // 按下的时间
                startTime: 0,
                // 按下的坐标
                startX: 0,
                startY: 0
                // // 离开的时间
                // endTime: 0,
                // // 离开的坐标
                // endX: 0,
                // endY: 0
            }
        },
        methods: {
            // 用户按下屏幕
            handleTouchstart(event) {
                // console.log('手指按下屏幕');
                // console.log('按下的X轴位置' + event.changedTouches[0].clientX);
                // console.log('按下的Y轴位置' + event.changedTouches[0].clientY);

                this.startTime = Date.now();
                this.startX = event.changedTouches[0].clientX;
                this.startY = event.changedTouches[0].clientY
            },
            handleTouchend(event) {
                // console.log('手指离开屏幕');
                // console.log('离开的X轴位置' + event.changedTouches[0].clientX);
                // console.log('离开的Y轴位置' + event.changedTouches[0].clientY);

                const endTime = Date.now();
                const endX = event.changedTouches[0].clientX;
                const endY = event.changedTouches[0].clientY;

                // 判断按下时长
                if (endTime - this.startTime > 2000){
                    return
                }

                let fangxiang = "";
                // 判断滑动的距离,是否合法，再判断方向, 注意 距离要加上绝对值
                if (Math.abs(endX - this.startX) > 10){
                    // 滑动方向
                    fangxiang = endX-this.startX > 0 ? "right" : "left";
                }else {
                    return;
                }
                console.log(fangxiang)
            }
        }
    }
</script>

<style scoped lang="scss">
    view{
        width: 100%;
        height: 1000rpx;
        background-color: aqua;
    }

</style>
